<template>
  <div ref="refScroll" class="articleList" @scroll="scroll">
    <van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
      <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
      <template #pulling="props">
        <img
          class="doge"
          src="https://img01.yzcdn.cn/vant/doge.png"
          :style="{ transform: `scale(${props.distance / 80})` }"
        >
      </template>

      <!-- 释放提示 -->
      <template #loosing>
        <img class="doge" src="https://img01.yzcdn.cn/vant/doge.png">
      </template>

      <!-- 加载提示 -->
      <template #loading>
        <img class="doge" src="https://img01.yzcdn.cn/vant/doge-fire.jpg">
      </template>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="item in list"
          :key="item.art_id"
          :title="item.title"
          @click="$router.push('/article/' + item.art_id)"
        >
          <template #label>
            <van-grid v-if="item.cover.images" :column-num="item.cover.images.length">
              <van-grid-item v-for="(img,index) in item.cover.images" :key="index" i>
                <van-image lazy-load :src="img" />
              </van-grid-item>
            </van-grid>
            <div class="meta">
              <span>{{ item.aut_name }}</span>
              <span>{{ item.comm_count }}</span>
              <span>{{ item.pubdate | relative }}</span>
              <span v-if="tokenInfo.token!==''" class="close">
                <van-icon name="cross" @click.stop="close(item.art_id)" />
              </span>
            </div>

          </template>

        </van-cell>
      </van-list>
    </van-pull-refresh>

  </div>
</template>

<script>
import { reqGetArticles } from '@/api/article'
import { mapState } from 'vuex'
export default {
  name: 'ArticleList',
  props: {
    // eslint-disable-next-line vue/require-default-prop
    channel: {
      type: Object,
      require
    }
  },

  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      timestamp: null,
      isLoading: false,
      scrollTop: null
    }
  },

  computed: {
    ...mapState('user', ['tokenInfo'])
  },
  created() {
    this.$eventBus.$on('del_article', obj => {
      const { articleId, channelId } = obj
      if (this.channel.id === channelId) {
        this.list = this.list.filter(item => item.art_id !== articleId)
      }
    })
  },
  activated() {
    this.$refs.refScroll.scrollTop = this.scrollTop
  },
  methods: {
    async onLoad() {
      if (!this.timestamp) {
        //  默认当前时间，表示拉取最新的时间
        this.timestamp = +new Date()
      }
      const result = await reqGetArticles(this.channel.id, this.timestamp)
      this.timestamp = result.data.pre_timestamp
      const arr = result.data.results
      this.list = [...this.list, ...arr]
      this.loading = false
      if (arr.length === 0) {
        this.finished = true
      }
    },

    async onRefresh() {
      const res = await reqGetArticles(this.channel.id, Date.now())
      this.list = res.data.results
      this.timestamp = res.data.pre_timestamp
      this.$toast.success('刷新成功')
      this.isLoading = false
    },

    close(id) {
      this.$emit('show_more', id)
    },

    scroll(e) {
      this.scrollTop = e.target.scrollTop
    }

  }

}
</script>

<style lang='scss' scoped>
    .articleList{
      height: 100%;
      overflow: auto;
        .meta{
            span{
                margin-right: 10px;
            }
            .close{
              float: right;
              margin-top: 4px;
            }
        }
    }
    .doge {
    width: 140px;
    height: 72px;
    margin-top: 8px;
    border-radius: 4px;

  }
</style>
